<template>
  <el-card class="m-dept-side">
    <div class="title">部门列表</div>
    <el-input v-model="filterText" placeholder="输入关键字进行过滤" class="filter-search" />
    <div class="filter-tree">
      <el-scrollbar class="scrollbar">
        <el-tree
          ref="treeRef"
          :data="tableData"
          default-expand-all
          :filter-node-method="filterNode"
          highlight-current
          :check-on-click-node="true"
          :expand-on-click-node="false"
          @node-click="handleSelectUserPage"
        />
      </el-scrollbar>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
  import { onBeforeMount, onMounted, ref, watch } from 'vue'
  import { ElTree } from 'element-plus'
  import { deptTreeSelect } from '@/api/system/user'

  const tableData = ref<Tree[]>()
  interface Tree {
    id: string
    label: string
    children?: Tree[]
  }

  onMounted(async () => {
    // 获取部门树信息
    await deptTreeSelect().then((req) => {
      tableData.value = req.data
    })
  })

  const filterText = ref('')
  const treeRef = ref<InstanceType<typeof ElTree>>()

  // 监听输入
  watch(filterText, (val) => {
    treeRef.value!.filter(val)
  })

  // 搜索
  const filterNode = (value: string, data: Tree) => {
    console.log(data)
    if (!value) return true
    return data.label.includes(value)
  }

  // 查询
  import $bus from '@/bus'

  const handleSelectUserPage = (node) => {
    console.log('查询')
    console.log(node.id)
    // 将id值传给兄弟组件进行分页查询
    $bus.emit('deptId', { deptId: node.id })
  }
</script>

<style lang="scss" scoped>
  @import '../index.scss';
</style>
